<template>
  <!-- 餐饮 -->
  <div class='water_tree_eat'>
    <waterfall :col='col' :width="itemWidth" :gutterWidth="8" :data="data" @scroll="scroll" id="waterBox" @loadmore='loading'>
      <template >
        <div class="cell-item" v-for="(item,index) in data" :key="index" @click="toDetail(item.id)">
          <img :src="$store.state.globalPic + item.thumb" alt="" class="imgb">
          <div class="item-body">
              <div class="item-desc">
                <div class="item_name">{{item.name}}</div>
                <div class="item_des">{{item.description}}</div>
                <div class="item_bottom flex">
                  <div class="hot flex">
                    <van-icon name="fire" color="#F6392D" size='14'/>
                    <span class="views_num">{{item.views}}</span>
                  </div>
                  <div class="button">
                    <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" size='mini'>查看详情</van-button>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </template>
    </waterfall>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data:[],  // 数据列表
      col:2, // 多少列
      page: 1, // 
      noData: false // 是否还有数据
    }
  },
  created() {
    // 初始化数据请求
    this.firstDataGet()
  },
  computed:{
    itemWidth(){  
      return (0.95*(document.documentElement.clientWidth/2)) // 每列的宽度
    },
    gutterWidth(){
      return (0.5*(document.documentElement.clientWidth/375)) // 列间隔
    }
  },
  methods:{
    // 初始化时发送数据请求
    firstDataGet() {
      let _this = this
      let msg = {
        type: 2,
        page: 1
      }
       _this.$api.sumrue.merchantListGet(msg).then(
        res => {
          console.log(res.data)
          _this.data = res.data
        }
      )
    },
    loading() {
      console.log('ddddd')
    },
    // 监听scroll来加载数据
    scroll(scrollData){ 
      
      let _this = this
      // 先判断是否请求数据
      let ifGetData = _this.$store.state.getMyData
      // 先判断是否请求 、、当数据量小于5时，store中ifGetData 值变为不请求的值Tab页切换时，自动变为可请求
      if(ifGetData == '不请求') {
        console.log('不发送')
        return
      }
      // 获取各个高度，计算是否到底部

      let waterH = document.getElementById('waterBox').offsetHeight // 文档高度
      let scHt = scrollData.scrollHeight
      let scTop = scrollData.scrollTop
      console.log(scrollData)
      console.log(waterH)
      if(scHt + scTop - waterH  == 92 || waterH <= 1) { // 滚动到底部时
        // 到底后自动page + 1
        _this.page = _this.page + 1
        // 请求参数
        let msg = {
          type: 2,
          page: _this.page
        }
        // 发送请求
         _this.$api.sumrue.merchantListGet(msg).then(
          res => {
            // 请求数据，push到数组当中
            let mydata = res.data
            for(let i = 0; i < mydata.length; i++) {
              _this.data.push(mydata[i])
            }
            if(mydata.length < 5 || waterH !== 0) {
              // 没有数据时 变为不可请求
              _this.$store.commit('changeGetMyData','不请求')
            }
          }
        )
      }
    },
    toDetail(id) {
      this.$router.push({
        path: '/merchant',
        query: {
          id: id
        }
      })
    }
  }
}
</script>

<style scoped>
#waterBox {
  padding: 0 .08rem .2rem;
  box-sizing: border-box;
    min-height: 100vh;
}
.imgb {
  width: 100%;
  display: block;
}

.cell-item {
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: .1rem;
  background-color: #fff;
}

.item-desc {
  padding: .2rem .2rem;
}

.item_name {
  font-size: .26rem;
  font-weight: 500;
  color: #000;
}
.item_des {
  word-break: break-all;
  overflow:hidden;
  text-overflow:ellipsis; 
  display:-webkit-box;
  -webkit-box-orient:vertical; 
  -webkit-line-clamp:2;
  font-size: .16rem;
  margin: .1rem 0;
  color: rgb(151, 148, 148);
}
.item_bottom {
  align-items: center;
  justify-content: space-between;
}
.button > .van-button__text {
  font-size: .2rem;
}
.hot {
  align-items: center;
}
.views_num {
  margin-left: .1rem;
  color: #F6392D;
  font-weight: 600;
}
</style>
